<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			ul,
			ol,
			li {
				list-style: none;
			}

			img {
				width: 100%;
				height: 100%;
				display: block;
			}

			.banner {
				width: 100%;
				height: 500px;
				position: relative;
				margin: 50px 0;
			}

			.banner>ul {
				width: 100%;
				height: 100%;
				position: relative;
			}

			.banner>ul>li {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0;
				transition: opacity .5s linear;
			}

			.banner>ul>li.active {
				opacity: 1;
			}

			.banner>ol {
				width: 200px;
				height: 30px;
				position: absolute;
				left: 30px;
				bottom: 30px;
				background-color: rgba(0, 0, 0, .5);
				display: flex;
				justify-content: space-around;
				align-items: center;
				border-radius: 15px;
			}

			.banner>ol>li {
				width: 20px;
				height: 20px;
				background-color: #fff;
				border-radius: 50px;
			}

			.banner>ol>li.active {
				background-color: orange;
			}

			.banner>div {
				width: 40px;
				height: 60px;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				background-color: rgba(0, 0, 0, .5);
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30px;
				color: #fff;
				text-align: center;
				line-height: 60px;
			}

			.banner>div.left {
				left: 0;
			}

			.banner>div.right {
				right: 0;
			}
		</style>
	</head>

	<body>
		<div class="banner">
			
			<ul class="imgBox">
				<li class="active"><img src="img/1.jpg" alt=""></li>
				<li><img src="img/2.jpg" alt=""></li>
				<li><img src="img/3.jpg" alt=""></li>
				<li><img src="img/4.jpg" alt=""></li>
				<li><img src="img/5.jpg" alt=""></li>
			</ul>
			
			<ol>
				<li data-i="0" data-name="point" class="active"></li>
				<li data-i="1" data-name="point"></li>
				<li data-i="2" data-name="point"></li>
				<li data-i="3" data-name="point"></li>
				<li data-i="4" data-name="point"></li>
			</ol>
			
		</div>

		<script>
			
			var imgs = document.querySelectorAll('ul>li');
			var points = document.querySelectorAll('ol>li');
			var banner = document.querySelector('.banner');
			
			var index = 0;
			
			function changeOne(type) {
				
				imgs[index].className = ''
				points[index].className = '';

				
				if (type === true) {
					index++;
				} else if (type === false) {
					index--;
				} else {
					index = type;
				}
			
				if (index >= imgs.length) {
					index = 0;
				}
				if (index < 0) {
					index = imgs.length - 1;
				}
				
				imgs[index].className = 'active';
				points[index].className = 'active';
			}
			
			banner.onclick = function(e) {
				
				if (e.target.dataset.name === 'point') {
					console.log('点击的是焦点盒子');
					
					var i = e.target.dataset.i - 0;
					
					changeOne(i);
				}
			}
			
			timer = setInterval(function() {
				
				changeOne(true)
			}, 3000);
			
		</script>
	</body>

</html>
